<template>
	<view class="spread">
		<view class="head">
			<image class="img" :src="member.avatarUrl"></image>
		</view>
		<view class="title"></view>
		<view class="er">
			<image :src="qr_code_url" class='image'></image>
		</view>
		<view class="btn">
			<view><button class="butt" @click="save" :disabled="is_click">保存二维码</button></view>
		</view>
		<view class="gui">
			<view>1.将此页面二维码保存并发送给您的好友</view>
			<view>2.好友识别二维码通过手机号进行注册</view>
			<view>3.好友进行实名认证后返推荐奖励给您账户</view>
		</view>
	</view>
</template>

<script>
	import * as fenxiao from '@/api/fenxiao.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				is_click: false,
				qr_code_url: "",
			};
		},
		computed: {
			...mapGetters(['member', 'referrer'])
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif
			//获取小程序码
			this.createAppletQRCode().then(res => {
				this.qr_code_url = res;
				console.log(this.qr_code_url)
			}).catch(err => {
				console.log('err', err)
			})

		},
		onShareAppMessage(res) {
			let referrer = uni.getStorageSync('referrer');
			console.log('referrer', referrer);
			if (referrer) {
				return {
					title: '恒鲜惠美食在线',
					path: '/pages/menu/menu?referrer=' + referrer,
					imageUrl: require('static/images/menu/banner.jpeg')
				}
			}
		},
		methods: {
			...mapActions(['createAppletQRCode']),
			save() {
				// #ifdef H5
				uni.showModal({
					title: '请截图保存'
				});
				// #endif

				// #ifdef MP-WEIXIN
				const that = this;
				this.is_click = true;
				uni.showLoading({
					title: '加载中'
				});
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(res) {
						uni.downloadFile({
							url: that.qr_code_url, //仅为示例，并非真实的资源
							success: res => {
								console.log(res);
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function(res) {
										console.log('save success', res);
										uni.showToast({
											title: '图片保存成功',
											duration: 2000
										});
										that.is_click = false;
										uni.hideLoading();
									}
								});
							}
						});
					}
				});

				// #endif
			}
		},
		onPullDownRefresh() {
			//this._load()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		}
	};
</script>

<style lang="scss">
	.spread {
		.head {
			background-color: #fd8259;
			height: 100px;
			position: relative;

			.img {
				width: 65px;
				height: 65px;
				border-radius: 50px;
				border: 1px solid #c896a6;
				position: absolute;
				left: 50%;
				bottom: -30px;
				margin-left: -32.5px;
			}
		}

		.title {
			text-align: center;
			padding: 40px 0 30px;
			font-size: 18px;
			font-weight: 600;
		}

		.er {
			text-align: center;

			image {
				width: 180px;
				height: 180px;
				border: 2px solid #f6d7b1;
				padding: 2px;
				margin: 0px 0 25px;
			}
		}

		.btn {
			display: flex;
			font-size: 13px;
			justify-content: center;

			.butt {
				background-color: #fb6471;
				height: 25px;
				line-height: 25px;
				border-radius: 20px;
				width: 140px;
				text-align: center;
				color: #fff;
			}
		}

		.gui {
			color: #9e9e9e;
			font-size: 12px;
			padding: 40px 0 0 75px;
			line-height: 20px;
		}
	}
</style>
